﻿@inject FwProject.Shop.Views.WebRootUrl WebRootUrl
@section styles{
    <style>
        .flow-default {
            overflow: auto;
            font-size: 0;
        }

            .flow-default li {
                display: inline-block;
                margin: 0 5px;
                font-size: 14px;
                width: 170px;
                margin-top: 10px;
                margin-left: 10px;
                height: 80px;
                line-height: 80px;
                text-align: center;
                background-color: #fff;
                position: relative;
            }

            .flow-default img {
                width: 100%;
                height: 97%;
            }

        .Goods_box {
            padding: 5px;
        }

        .Goods_content {
            background-color: #fafafa;
            height: 350px;
            overflow-y: auto;
        }

        .Goods_item_img {
            width: 50%;
            height: 100%;
            float: left;
        }

        .Goods_item_content {
            width: 50%;
            height: 100%;
            float: right;
            font-size: 12px;
        }

            .Goods_item_content .Goods_item_name, .Goods_item_content .Goods_item_price {
                position: relative;
                width: 100%;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                word-break: break-all;
                overflow: hidden;
                line-height: 2;
                text-align: left;
            }

        .Goods_item_name {
            height: 70%;
        }

        .Goods_item_price {
            height: 30%;
        }

            .Goods_item_price em {
                font-style: normal;
                color: #F23F40;
            }

        .Goods_item_mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99;
            cursor: pointer;
        }

        .flow-default li.active .Goods_item_mask {
            display: block;
        }

        .Goods_item_mask_check {
            position: relative;
            height: 100%;
            background-color: rgba(204,204,204,0.5);
            -webkit-transition: all ease-out .3s;
            -moz-transition: all ease-out .3s;
            -ms-transition: all ease-out .3s;
            -o-transition: all ease-out .3s;
            transition: all ease-out .3s;
        }

            .Goods_item_mask_check:hover {
                background-color: #ccc;
            }

            .Goods_item_mask_check i {
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -15px;
                margin-left: -15px;
                width: 30px;
                height: 30px;
                -webkit-transition: all ease-out .3s;
                -moz-transition: all ease-out .3s;
                -ms-transition: all ease-out .3s;
                -o-transition: all ease-out .3s;
                transition: all ease-out .3s;
                background: url('/images/img-02.png') no-repeat center;
                background-size: 100%;
            }


        .flow-default li .Goods_item_chekced {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            width: 25px;
            height: 25px;
            background: url('/images/img-01.png') no-repeat center;
            background-size: 100%;
            z-index: 99;
        }

        .flow-default li.selected .Goods_item_chekced {
            display: block;
        }

        .flow-default li.selected .Goods_item_mask_check {
            background-color: #f23f40 !important;
        }

            .flow-default li.selected .Goods_item_mask_check i {
                background: url('/images/img-03.png') no-repeat center;
                background-size: 100%;
            }
    </style>
}

<div class="layui-card-header layuiadmin-card-header-auto" style="border-bottom:0; margin-top:20px;">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">关键字</label>
            <div class="layui-input-block">
                <input type="text" name="keyword" id="keyword" placeholder="请输入商品关键字" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-replys" type="button" data-type="reload" lay-submit="" id="search" lay-filter="LAY-app-forumreply-search">
                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
        </div>
    </div>
</div>
<div class="layui-form layui-form-pane" style="padding:10px;">
    <div class="layui-row">
        <div class="layui-col-xs6 Goods_box">
            <div class="Goods_content" id="LAY_goods_parent">
                <ul class="flow-default" id="LAY_goods"></ul>
            </div>
        </div>
        <div class="layui-col-xs6 Goods_box">
            <div class="Goods_content">
                <ul class="flow-default" id="LAY_select"></ul>
            </div>
        </div>
    </div>
    <div class="layui-layer-btn layui-layer-btn-" style="padding:8px 12px;z-index:1000;position: fixed;bottom:0;left: 1px;width: 98%;height: 50px; background:rgba(230,230,230,0.8)">
        <a id="save" class="layui-layer-btn0" lay-submit="" lay-filter="saveprops">保存</a>
    </div>

</div>


@section scripts{
    <script src="~/js/main.js"></script>
    @*<script src="~/Theme/js/plugins/layer/laydate/laydate.js"></script>*@
    <script src="~/js/laydate/laydate.js"></script>
    <script type="text/javascript">
        var form, layer, layedit, flow;
        layui.use(['form', 'layedit', 'layer', 'flow'], function () {
            layedit = layui.layedit;
            form = layui.form;
            layer = layui.layer;
            flow = layui.flow;

            //自定义验证规则
            form.verify({
                required: function (value) {
                    if (value == "") {
                        return '必填项不能为空';
                    }
                }
            });
            function Flowload() {
               flow.load({
                elem: '#LAY_goods' //流加载容器
                , scrollElem: '#LAY_goods' //滚动条所在元素，一般不用填，此处只是演示需要。
                , isAuto: false
                , isLazyimg: true
                , done: function (page, next) { //加载下一页
                    var keyword = $("#keyword").val();
                    $.get("/Promotions/GetShopProductData?page=" + page + "&keyword=" + keyword, function (data, successInfo) {
                        if (data.success) {
                            var lis = [];

                            if (data.result.data.length>0) {
                                for (var i = 0; i < data.result.data.length; i++) {
                                    var json = { id: data.result.data[i].id, productName: data.result.data[i].productName, productNumber: data.result.data[i].productNumber, productType: data.result.data[i].category, price: data.result.data[i].spcemarketPrice, imagePic:"@WebRootUrl.WebImageRootUrl()/"+ data.result.data[i].imagePic};
                                    lis.push('<li data-goodsid="' + data.result.data[i].id + '"><span class="Goods_item_chekced"></span><div class="Goods_item_img"><img lay-src="@WebRootUrl.WebImageRootUrl()/' + data.result.data[i].imagePic + '"></div><div class="Goods_item_content"><div class="Goods_item_name">' + data.result.data[i].productName + '</div><div class="Goods_item_price"><em>￥' + data.result.data[i].spcemarketPrice + '</em></div></div><div class="Goods_item_mask"><div class="Goods_item_mask_check"><i></i></div></div> <input type="hidden" class="goods_json" value='+ JSON.stringify(json)+' /></li>')
                                }
                            }
                            next(lis.join(''), data.result.hasNextPage);
                        } else {
                            layer.msg("商品数据获取失败！")
                        }


                    })
                }
            });
            }
            Flowload();
            $("#search").on("click", function () {
                //流加载没有重载方法也是够了。。。
                $("#LAY_goods").remove();
                $("#LAY_goods_parent").append("<ul class='flow-default' id='LAY_goods'></ul>")
                Flowload();
            });

            $(".Goods_content").on("mouseenter", ".flow-default li", function () {
                $(this).addClass("active");
            })
            $(".Goods_content").on("mouseleave", ".flow-default li", function () {
                $(this).removeClass("active");
            })

            $(".Goods_content").on("click", "#LAY_goods .Goods_item_mask .Goods_item_mask_check", function () {
                var goods = $(this).parent().parent();
                if (goods.hasClass("selected")) {
                    var id = goods.data("goodsid");
                    $("#LAY_select").children("li[data-goodsid='" + id + "']").remove();
                    goods.removeClass("selected");
                } else {
                    goods.addClass("selected");
                    $("#LAY_select").append(goods.clone().removeClass("active"));
                }
            })

            $(".Goods_content").on("click", "#LAY_select .Goods_item_mask .Goods_item_mask_check", function () {
                var goods = $(this).parent().parent();
                var id = goods.data("goodsid");
                $("#LAY_goods").children("li[data-goodsid='" + id + "']").removeClass("selected");
                goods.remove();
            })
        })

        function ReloadAjaxCallbackgoback(data, successInfo) {
            if (data.success) {
                layer.msg('保存成功！')
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭当前iframe页面
            } else {
                layer.msg('保存失败：' + successInfo);
            }
        }

        $('#save').on('click', function () {
            var products = $("#LAY_select").find("li");
            if (products.length>0) {
                var list = new Array();
                for (var i = 0; i < products.length; i++) {
                    var json = $(products[i]).find(".goods_json:first").val();
                    list.push(JSON.parse(json));
                }
                parent.AddGoods(list);

                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭当前iframe页面
            } else {
                layer.msg("请至少选择一条商品信息!");
            }
        });

        $(document).ready(function () {



        });
    </script>
}

